<template>
	<div class="MainBody">
		<div class="leftBody">
			<h1>助农资讯</h1>
			<ul v-for="(item,index) in ZnMessDate" :key="index" v-if="index < 10">
				<li @click="skipMessInfo(item.znMessId)">{{item.messTitle}}</li>
			</ul>
		</div>
		<el-card class="box-card2">
			<h2>{{znMessDetail.messTitle}}</h2>
			<div class="content_click">{{znMessDetail.createTime}}</div>
			<div class="w-e-text">
				<div v-html="znMessDetail.messContent"></div>
			</div>
		</el-card>
	</div>
	
</template>

<script>
	import znMessApi from "@/api/znMessage.js"
	export default {
		data() {
			return {
				znMessDetail:{},
				ZnMessDate:[],
				
			}
		},
		methods: {
			skipMessInfo(znMessId){
				this.$router.push({ path: `/ZnMessDetail/${znMessId}` }).catch(err => err);
				this.getMessageDetail();
			},
			getId() {
				return this.$route.params.znMessId;
			},
			async getMessageDetail() {
				const res = await znMessApi.getMessageDetail("znMessage/getMessageDetail/" + this.getId());
				if (res.code == 200) {
					this.znMessDetail = res.data
				} else {
					this.$message.warning('数据异常，请联系管理员');
				}
			},
			async getZnMessageAll() {
				const res = await znMessApi.getZnMessageAll("/znMessage/getZnMessageAll");
				if(res.code == 200){
					this.ZnMessDate = res.data
				}
			},
		},
		mounted() {
			const znMessId = this.getId();
		},
		created() {
			this.getZnMessageAll();
			this.getMessageDetail();
		}
	}
</script>

<style lang="scss" scoped>
	.MainBody {
		margin: 0 15% 3% 15%;
		display: flex;
		.leftBody {
			margin-right: 20px;
			width: 18%;
			height: 86.5vh;
			background-color: #e7e7e7;
			border-radius: 4px;
		
			h1 {
				margin: 30px 0 50px 10px;
				line-height: 0;
				font-size: 20px;
				color: #2c92f8;
			}
		
			ul {
				overflow: hidden;
				margin-left: 35px;
				list-style: none;
				/* 去除默认点样式 */
				padding-left: 0;
				font-size: 16px;
		
				li {
					cursor: pointer;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					margin-bottom: 30px;
				}
			}
		}
		.box-card2{
			flex: 1;
		}
	}
</style>